<template>
  <div class="official-container">
    <!-- 背景轮播图 -->
    <!-- <div class="background-banner">
      <el-carousel height="440px" :interval="5000" arrow="never" indicator-position="none">
        <el-carousel-item>
          <div class="background-content" :style="{ backgroundImage: 'url(https://www.tme.cn/media/image/47/c7/9396e37ac6831ef13522862e1e54.png)' }"></div>
        </el-carousel-item>
        <el-carousel-item>
          <div class="background-content" :style="{ backgroundImage: 'url(/img/banner3.jpg)' }"></div>
        </el-carousel-item>
        <el-carousel-item>
          <div class="background-content" :style="{ backgroundImage: 'url(/img/banner3.jpg)' }"></div>
        </el-carousel-item>
      </el-carousel>
    </div> -->

    <!-- 原有内容 -->
    <right-icons />
    <carousel-section />
    <operation-area />

    <!-- 推荐供应商卡片 -->
    <!-- <div class="supplier-recommendation-area">
      <el-row gutter="20">
        <el-col :span="8">
          <div class="recommendation-card blue">
            <div class="card-content">
              <img src="../../../public/img/111.png" alt="推荐供应商" class="card-icon" />
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="recommendation-card yellow">
            <div class="card-content">
              <img src="../../../public/img/222.png" alt="推荐供应商" class="card-icon" />
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="recommendation-card purple">
            <div class="card-content">
              <img src="../../../public/img/333.png" alt="推荐供应商" class="card-icon" />
            </div>
          </div>
        </el-col>
      </el-row>
    </div> -->

    <!-- 火爆商品 -->
    <supply-showcase />

    <!-- 资讯与物流区 -->
    <div class="info-logistics-area">
      <el-row gutter="20">
        <!-- 资讯区 -->
        <el-col :span="8">
          <div class="info-section">
            <div class="info-header">
              <div class="info-title">多氟多资讯</div>
              <div class="info-sub">了解行业动态，分析行情数据<br>平台最新资讯，精准研判内容</div>
            </div>
            <div class="info-tabs">
              <el-tabs v-model="infoTab" stretch>
                <el-tab-pane label="平台动态" name="platform">
                  <div class="info-omg">
                    <div class="omg-title">OMG 用它</div>
                    <div class="omg-desc">精选多氟多资讯热榜 | 多氟多商城 | 关注度突破5,786,2！</div>
                  </div>
                  <ul class="info-list">
                    <li v-for="item in infoList" :key="item.id">
                      <span class="dot"></span>{{ item.title }}
                    </li>
                  </ul>
                </el-tab-pane>
                <el-tab-pane label="企业动态" name="company">
                  <ul class="info-list">
                    <li v-for="item in companyList" :key="item.id">
                      <span class="dot"></span>{{ item.title }}
                    </li>
                  </ul>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </el-col>
        <!-- 行业新闻区 -->
        <el-col :span="16">
          <div class="news-section">
            <el-row gutter="0">
              <el-col :span="12">
                <div class="news-block">
                  <div class="news-title">行业资讯</div>
                  <ul class="news-list">
                    <li v-for="item in industryNews" :key="item.id">
                      <div class="news-item-title">{{ item.title }}</div>
                      <div class="news-item-desc">{{ item.desc }}</div>
                      <div class="news-item-date">{{ item.date }}</div>
                    </li>
                  </ul>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="news-block">
                  <div class="news-title">深度分析</div>
                  <ul class="news-list">
                    <li v-for="item in deepAnalysis" :key="item.id">
                      <div class="news-item-title">{{ item.title }}</div>
                      <div class="news-item-desc">{{ item.desc }}</div>
                      <div class="news-item-date">{{ item.date }}</div>
                    </li>
                  </ul>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row gutter="20" class="logistics-row">
        <!-- 象运物流区 -->
        <el-col :span="8">
          <div class="logistics-section">
            <div class="logistics-title">象运物流</div>
            <div class="logistics-desc">以智慧仓配网络为基础<br>构建高效的物流系统</div>
            <div class="logistics-img"></div>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="logistics-service-section">
            <el-row gutter="0">
              <el-col :span="8" v-for="item in logisticsServices" :key="item.id">
                <div class="logistics-service-block">
                  <div class="service-title">{{ item.title }}</div>
                  <div class="service-desc">{{ item.desc }}</div>
                </div>
              </el-col>
            </el-row>
            <div class="logistics-contact">
              <span>合作咨询 刘经理</span>
              <span class="contact-phone">188xxxxxxxx</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import RightIcons from '@/layout/official/righticons/index.vue';
import CarouselSection from './components/CarouselSection.vue';
import OperationArea from './components/OperationArea.vue';
import SupplyShowcase from './components/SupplyShowcase.vue';

export default {
  components: {
    RightIcons,
    CarouselSection,
    OperationArea,
    SupplyShowcase
  },
  data() {
    return {
      infoTab: 'platform',
      infoList: [
        { id: 1, title: '重磅！多氟多商城新版上线，欢迎体验！' },
        { id: 2, title: '数字化采购 | 多氟多商城助力降本增效！' },
        { id: 3, title: '重磅发布！多氟多商城2025年度盛典圆满落幕' },
        { id: 4, title: '平台升级，功能更强大！' },
        { id: 5, title: '多氟多产供大数据系统上线' },
        { id: 6, title: '新赛道来袭，共建高端有色金属产业新生态' },
      ],
      companyList: [
        { id: 1, title: '某企业荣获行业大奖' },
        { id: 2, title: '企业数字化转型案例' },
        { id: 3, title: '企业与高校产学研合作' },
        { id: 4, title: '企业绿色发展新突破' },
      ],
      industryNews: [
        { id: 1, title: '再生铝锭价格行业首次列入重点污染...', desc: '再生铝锭价格行业首次列入重点污染源名录，环保要求升级。', date: '07-10' },
        { id: 2, title: '铜价持续上涨且回盘至高点八个月...', desc: '铜价持续上涨，回盘至高点，市场信心增强。', date: '07-09' },
        {id: 3, title: '国际铝价上涨，市场对进口铝的需求...', desc: '国际铝价上涨，市场对进口铝的需求增加，价格预期走高。', date: '07-08'},
        {id: 4, title: '国际铝价上涨，市场对进口铝的需求...', desc: '国际铝价上涨，市场对进口铝的需求增加，价格预期走高。', date: '07-08'},
      ],
      deepAnalysis: [
        { id: 1, title: '临近交割市场供应依然偏紧，沪铝短期...', desc: '临近交割市场供应依然偏紧，沪铝短期或将维持高位震荡。', date: '07-10' },
        { id: 2, title: '市场现货利润拉升中枢再度上升，...', desc: '现货利润拉升，市场活跃度提升，价格中枢上移。', date: '07-09' },
        {id: 3, title: '国际铝价上涨，市场对进口铝的需求...', desc: '国际铝价上涨，市场对进口铝的需求增加，价格预期走高。', date: '07-08'},
      ],
      logisticsServices: [
        { id: 1, title: '标准配送', desc: '标准时效，一单一循' },
        { id: 2, title: '仓储调度', desc: '9大节点城市，周内均可发货' },
        { id: 3, title: '园区发单', desc: '入驻工作日内自助发单，系统自动匹配' },
        { id: 4, title: '在途追踪', desc: '24小时全程物流追踪，智能预警' },
        { id: 5, title: '结构装卸', desc: '结构装卸，提升效率，开箱即用，标准作业' },
        { id: 6, title: '异常处理', desc: '异常情况智能处理，系统自动预警' },
      ],
    };
  }
};
</script>

<style lang="scss" scoped>
.official-container {
  position: relative;
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 440px; // 改为 min-height 以适应内容

  .supplier-recommendation-area {
    margin: 20px 0;
  }

  .recommendation-card {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    height: 150px;

    .card-title {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      margin-bottom: 10px;

      .badge {
        font-size: 12px;
        color: #999;
        margin-left: 10px;
      }
    }

    .card-content {
      display: flex;
      align-items: center;
      flex-grow: 1;

      .card-icon {
        width: 50px;
        height: 50px;
        margin-right: 15px;
      }

      .card-text {
        .main-text {
          font-size: 18px;
          font-weight: 700;
          color: #333;
        }

        .sub-text {
          font-size: 14px;
          color: #666;
        }
      }
    }
  }

  // 不同颜色主题
  .blue {
    background: linear-gradient(135deg, #e3eafc, #d0e0f7);
  }

  .yellow {
    background: linear-gradient(135deg, #fef7e0, #fcebb9);
  }

  .purple {
    background: linear-gradient(135deg, #ece0f7, #d9c0e8);
  }

  .info-logistics-area {
    margin: 20px 0 0 0; // 调整为合理间距
    background: none;

    .info-section {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
      padding: 20px 20px 0 20px;

      .info-header {
        background: linear-gradient(135deg, #3a5ba0 0%, #5e8edc 100%);
        border-radius: 12px 12px 0 0;
        padding: 18px 20px 10px 20px;
        color: #fff;

        .info-title {
          font-size: 22px;
          font-weight: 700;
        }

        .info-sub {
          font-size: 13px;
          margin-top: 8px;
        }
      }

      .info-tabs {
        margin-top: 10px;

        .el-tabs__header {
          margin-bottom: 0;
        }

        .omg-title {
          font-size: 20px;
          font-weight: 700;
          color: #ff6200;
          margin-bottom: 6px;
        }

        .omg-desc {
          font-size: 13px;
          color: #333;
          margin-bottom: 10px;
        }

        .info-list {
          list-style: none;
          padding: 0;
          margin: 0;

          li {
            font-size: 14px;
            color: #333;
            margin-bottom: 8px;
            display: flex;
            align-items: center;

            .dot {
              width: 6px;
              height: 6px;
              background: #3a5ba0;
              border-radius: 50%;
              margin-right: 8px;
              display: inline-block;
            }
          }
        }
      }
    }

    .news-section {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
      padding: 20px 20px 0 20px;

      .news-block {
        margin-bottom: 10px;

        .news-title {
          font-size: 16px;
          font-weight: 700;
          color: #3a5ba0;
          margin-bottom: 10px;
        }

        .news-list {
          list-style: none;
          padding: 0;
          margin: 0;

          li {
            margin-bottom: 12px;

            .news-item-title {
              font-size: 15px;
              font-weight: 600;
              color: #222;
              margin-bottom: 2px;
            }

            .news-item-desc {
              font-size: 13px;
              color: #666;
              margin-bottom: 2px;
            }

            .news-item-date {
              font-size: 12px;
              color: #aaa;
              text-align: right;
            }
          }
        }
      }
    }

    .logistics-row {
      margin-top: 20px;
    }

    .logistics-section {
      background: #e3eafc;
      border-radius: 12px;
      padding: 24px 20px 20px 20px;
      min-height: 180px;

      .logistics-title {
        font-size: 20px;
        font-weight: 700;
        color: #1976d2;
        margin-bottom: 8px;
      }

      .logistics-desc {
        font-size: 14px;
        color: #333;
        margin-bottom: 10px;
      }

      .logistics-img {
        width: 100%;
        height: 60px;
        background: url('https://static.zibovip.top/imgs/2025/04/warehouse.png') no-repeat center/contain;
        margin-top: 10px;
      }
    }

    .logistics-service-section {
      background: #fff;
      border-radius: 12px;
      padding: 20px 20px 10px 20px;
      min-height: 180px;

      .logistics-service-block {
        background: #f5f7fa;
        border-radius: 8px;
        padding: 12px 10px;
        margin-bottom: 10px;

        .service-title {
          font-size: 15px;
          font-weight: 600;
          color: #1976d2;
          margin-bottom: 4px;
        }

        .service-desc {
          font-size: 13px;
          color: #333;
        }
      }

      .logistics-contact {
        margin-top: 10px;
        font-size: 15px;
        color: #222;

        .contact-phone {
          color: #1976d2;
          font-weight: 700;
          margin-left: 10px;
        }
      }
    }
  }
}


.supplier-recommendation-area {
  margin: 20px 0;

  .recommendation-card {
    width:100%; // 卡片宽度占满容器
    padding: 0; // 移除卡片内边距，让图片贴边显示
    height: 100%px; // 固定卡片高度
    border-radius: 8px; // 保持圆角
    overflow: hidden; // 防止图片溢出时破坏圆角

    .card-content {
      height: 100%; // 内容区域占满卡片高度
    }

    .card-icon {
      width: 100%; // 宽度占满容器
      height: 100%; // 高度占满容器
      object-fit: cover; // 图片覆盖容器（可能裁剪边缘）
      // 若需保持图片完整显示可改为 object-fit: contain（可能留空白）
    }
  }
}
</style>
